<!DOCTYPE html>
<html>

<head>
    <title>组件基础</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <!-- 组件基础 -->
    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    <!-- 通过 Prop 向子组件传递数据 -->
    <div id="blog-post-demo">
        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
        <hr>

        <blog-post 
        v-for="post in posts" 
        v-bind:key="post.id" 
        v-bind:title="post.title">
    </blog-post>
    </div>

    <script>
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-counter', {
            data: function() {
                return { count: 0 }
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        });

        new Vue({
            el: '#components-demo'
        });

        Vue.component('blog-post', {
            props: ['title'],
            template: '<h3>{{ title }}</h3>'
        });

        new Vue({
            el: '#blog-post-demo',
            data: {
                posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' }
                ]
            }
        });

    </script>
</body>

</html>